<template>
	<view class="text-df">

		<image :src="imgURL+notice.indexImg" style="width: 100%;" mode="aspectFill" class="border-radius-xs">
		</image>

		<view class="padding-lr-com margin-top-xs">
			<view class="flex-row-bt">
				<view class=" ">
					<text>捐赠人： </text>
					<text class="text-bold text-lg" v-if="notice.donateName==null">匿名捐赠</text>
					<text v-for="i in notice.donateName" class="text-bold text-lg" v-else>{{i}}</text>
				</view>
				<!-- <view v-if="notice.itemStatus=='0'" class="theme-color">待分配</view>
				<view v-if="notice.itemStatus=='1'" class="">已接受</view>
				<view v-if="notice.itemStatus=='2'" class="text-mid">已使用</view> -->
			</view>
			<view class="margin-top-xs " v-if="notice.telPhone!=null">
				<text>联系方式： </text>
				<text class="">{{notice.telPhone}}</text>
			</view>
			<view class="margin-top-xs ">
				<text>捐赠编号： </text>
				<text class="">{{notice.donationNumber}}</text>
			</view>
			<view class="margin-top-xs ">
				<text>捐赠时间： </text>
				<text class="">{{notice.createTime.slice(0,10)}}</text>
			</view>
		</view>

		<view class="margin-top-sm padding-lr-com">
			<view class="text-bold text-lg">物资清单</view>
			<table class="margin-top-sm" cellspacing="0" cellpadding="0" style="">
				<tr style="display: flex;">
					<th style="background-color: #d8d8d8; width: 140rpx; text-align: center; padding: 10rpx 0; font-weight: 500;margin: 0 1px 0 0;"
						class="text-black">物资名称
					</th>
					<th style="background-color: #d8d8d8; width: 180rpx; text-align: center; padding: 10rpx 0; font-weight: 500;margin: 0 1px 0 0;"
						class="text-black">规格型号</th>
					<th style="background-color: #d8d8d8; width: 140rpx; text-align: center; padding: 10rpx 0; font-weight: 500;margin: 0 1px 0 0;"
						class="text-black">数量</th>
					<th style="background-color: #d8d8d8; width: 100rpx; text-align: center; padding: 10rpx 0; font-weight: 500;margin: 0 1px 0 0;"
						class="text-black">单价</th>
					<th style="background-color: #d8d8d8; width: 140rpx; text-align: center; padding: 10rpx 0; font-weight: 500;margin: 0 1px 0 0;"
						class="text-black">总计</th>
				</tr>
				<tr v-for="(item,index) in notice.donations" :key="index">
					<view style="display: flex; border-bottom: 1px solid #e6e6e6;">
						<td style=" overflow-wrap: break-word; width: 140rpx; text-align: center; padding: 10rpx 0; border-right: 1px solid #e6e6e6;"
							class="">
							{{item.materialName}}
						</td>
						<td
							style=" overflow-wrap: break-word; width: 180rpx; text-align: center; padding: 10rpx 0; border-right: 1px solid #e6e6e6;">
							{{item.specifications}}
						</td>
						<td
							style=" overflow-wrap: break-word; width: 140rpx; text-align: center; padding: 10rpx 0; border-right: 1px solid #e6e6e6;">
							{{item.itemNumber}}
						</td>
						<td
							style=" overflow-wrap: break-word; width: 100rpx; text-align: center; padding: 10rpx 0; border-right: 1px solid #e6e6e6;">
							{{item.monovalent}}
						</td>
						<td style=" width: 140rpx; text-align: center; padding: 10rpx 0;  overflow-wrap: break-word;"
							class="">
							{{item.totalPrice}}
						</td>
					</view>
				</tr>
			</table>

			<view style="text-align: right;" class="margin-top-sm">
				<text class="text-sm margin-right-xs">总计:</text>
				<text class="text-xl text-bold theme-color">￥{{notice.total}}</text>
			</view>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import { imgURL } from '../../api/request';
	import { onLoad } from "@dcloudio/uni-app"
	import { getDonateInfo } from '../../api/notice/notice';

	//慈善慈善
	const notice = ref({
		"id": "6",
		"donationNumber": "pxszf20240409101552",
		"indexImg": "/profile/product/2024/04/03/Snipaste_2024-04-03_14-53-05_20240403145423A020.png",
		"donateName": "萍乡市政府",
		"telPhone": "12345678910",
		"itemStatus": "0",
		"createTime": "2024-04-09 10:15:52",
		"total": "32150.00",
		"donations": [
			{
				"id": "7",
				"materialName": "衣物",
				"specifications": "短袖",
				"itemNumber": 500,
				"monovalent": "60.30",
				"totalPrice": "30150.00",
				"donateId": "6"
			},
			{
				"id": "8",
				"materialName": "书本",
				"specifications": "图书",
				"itemNumber": 200,
				"monovalent": "10.00",
				"totalPrice": "2000.00",
				"donateId": "6"
			}
		]
	})

	onLoad((option) => {
		get_detail(option.id)
	})

	//捐赠详情
	const get_detail = (id : any) => {
		getDonateInfo(id).then((res : any) => {
			if (res.code == 200) {
				notice.value = res.data
				notice.value.total = formatPrice(notice.value.total)
				for (let i = 0; i < notice.value.donations.length; i++) {
					notice.value.donations[i].totalPrice = formatPrice(notice.value.donations[i].totalPrice)
				}
			}
		})
	}

	//价值转换
	const formatPrice = (price : String) => {
		console.log(String(price).replace(/\B(?=(\d{3})+(?!\d))/g, ','))
		return String(price).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>
